<template>
  <el-card>
    <el-row>
      <el-col :span="12" :offset="8">
        <my-date-day v-on:query="queryData"></my-date-day>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="8">
        <el-select
          value-key="item"
          v-model="selValue"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div id="fhyc_chart"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import myDateDay from "../../myDateDay.vue";
export default {
  components: {
    myDateDay,
  },
  data() {
    return {
      options: [
        {
          id: "0000",
          name: "河南电网",
        },
        {
          id: "0001",
          name: "郑州",
        },
        {
          id: "0002",
          name: "安阳",
        },
        {
          id: "0003",
          name: "平顶山",
        },
        {
          id: "0004",
          name: "洛阳",
        },
        {
          id: "0005",
          name: "焦作",
        },
        {
          id: "0006",
          name: "新乡",
        },
        {
          id: "0007",
          name: "三门峡",
        },
        {
          id: "0008",
          name: "开封",
        },
        {
          id: "0009",
          name: "南阳",
        },
        {
          id: "0010",
          name: "漯河",
        },
        {
          id: "0011",
          name: "濮阳",
        },
        {
          id: "0012",
          name: "商丘",
        },
        {
          id: "0013",
          name: "驻马店",
        },
        {
          id: "0014",
          name: "信阳",
        },
        {
          id: "0015",
          name: "许昌",
        },
        {
          id: "0016",
          name: "鹤壁",
        },
        {
          id: "0017",
          name: "周口",
        },
        {
          id: "0018",
          name: "济源",
        },
      ],
      value: "",
      selValue: "",
    };
  },
  methods: {
    async queryData(pdate) {
      let netid = this.selValue;
      const { data: res } = await this.$http.get(
        `/manage1/fhyc/st/vue_st_fhyc_chart?pdate=${pdate}&netid=${netid}`
      );
      console.log(res);
      this.initChart(res);
    },
    initChart(res) {
      var myChart = this.$echarts.init(document.getElementById("fhyc_chart"));
      myChart.clear();
      var option = {
        title: {
          text: "省网用电",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["实际用电", "计划用电"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: res.xAxisList[0],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "预测负荷",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: res.data[0],
          },
          {
            name: "实际负荷",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: res.data[1],
          },
        ],
      };
      // this.$nextTick(function () {
      option && myChart.setOption(option);
      // });
    },
  },
};
</script>

<style scoped>
#fhyc_chart {
  margin-top: 50px;
  width: 100%;
  height: 400px;
}
.el-select {
  margin-top: 10px;
  width: 220px;
}
</style>